<!-- 这是资料管理  ==>   房屋管理  表格

    此表格有  详情  编辑  删除三个按钮

    详情需要进行传递参数
-->
<template>
    <div class="main">
        <div class="multi-select">
            <span>{{ tablename }}</span>
            <div>
                <a-button type="primary" :loading="loading" @click="adddata">
                    +新建
                </a-button>
                <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
                    批量处理
                </a-button>
            </div>
        </div>
        <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="taberTitle"
            :data-source="data" :rowKey="record => record.pageid">
            <a slot="action" slot-scope="text">{{ text }}</a>


            <span slot="action" slot-scope="text,record">

                <!-- 跳转到房屋详情页面 -->
                <!-- <a>详情</a> -->
                <a @click="JumpDetails(record)">详情</a>
                <a-divider type="vertical" />

                <!-- 跳转到新建房屋页面 -->
                <a @click="JumpEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a @click="showDeleteConfirm(record)">
                    删除
                </a>
            </span>
            <!-- <zonelist></zonelist> -->
        </a-table>
    </div>
</template>
<script>



export default {
    name: 'RoomFrom',
    data() {
        return {


            selectedRowKeys: [], // Check here to configure the default column
            loading: false,
        };
    },
    // 接收传递进来的头部数据进行渲染
    props: {
        taberTitle: {
            type: Array,
            default: []
        },
        tablename: {
            type: String,
            default: ""
        },
        data: {
            type: Array,
            default: []
        },
        pageurl: {
            type: Array,
            default: []
        }
    },
    mounted() {
        console.log(this.taberTitle)
    },
    computed: {
        hasSelected() {
            return this.selectedRowKeys.length > 0;
        },
    },
    methods: {
        //跳转审核页
        JumpDetails() {
            this.$router.push(this.pageurl[0])
        },
        //跳转编辑页
        JumpEdit() {
            this.$router.push(this.pageurl[1])
        },
        start() {
            this.loading = true;
            // ajax request after empty completing
            setTimeout(() => {
                let A = this.data.filter(item => {
                    return !(this.selectedRowKeys.includes(item.pageid))
                })
                this.data = A
                this.loading = false;
                this.selectedRowKeys = [];
            }, 1000);
        },
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        addlistdatafn() {

        },
        showDeleteConfirm(record) {
            console.log(record)//当前列的数据
            this.$confirm(
                {
                    title: '删除确认',
                    content: '确定删除此信息吗？',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    icon: "",
                    onOk: () => {
                        //点击删除时进行过滤数据
                        let staging = this.data.filter(item => {
                            return !(item.pageid == record.pageid)
                        })

                        this.data = staging
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                });
        },
        adddata() {

        }
    },
};
</script>

<style lang="less" scoped>
.main {
    width: 100%;
}

/deep/.multi-select {
    text-align: right;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;

    >span {
        font-size: 18px;
    }

    button:last-child {
        margin-left: 10px;
    }
}

/deep/.ant-divider {
    color: transparent;
    background-color: transparent;
}

/deep/.ant-table-row-cell-last {
    width: 180px;
}
</style>